import React, { useState } from 'react';
import {
  List,
  Picker,
  TextareaItem,
  Switch,
  Modal
} from 'antd-mobile';
import Btn from "../../../components/btn/Btn";

import './add.less';


const Item = List.Item;
const alert = Modal.alert;

function Add() {
  let [sourceValue,setSourceValue] = useState();
  let [checked,setChecked] = useState(false);

  let sourceData = [
    {label:'a',value:'1'},
    {label:'b',value:'2'},
  ];

  let warn = e => {

    alert('提示', '确认新增', [
      { text: '取消', onPress: () => console.log('cancel') },
      { text: '确认', onPress: () => console.log('ok') },
    ])
  }

  return (
    <div className='v-history-add'>
      <List className='g-p5-10 g-bdrs12 g-bg-f'>
        <Item extra={'钱多多'}>顾客姓名</Item>

        <Item extra={'123456789123'}>手机号</Item>

        <Item extra='朱娜'>所属客管</Item>

      </List>

      <List className='g-p5-10 g-mt10 g-bdrs12 g-bg-f'>

        <Picker data={sourceData} cols={1}
                value={sourceValue}
                extra='点击选择'
                onChange={e=>setSourceValue(e)}>
          <Item>类型</Item>
        </Picker>

        <Picker extra='点击选择'>
          <Item>时间</Item>
        </Picker>

        <Picker extra='点击选择'>
          <Item>项目</Item>
        </Picker>

        <Picker extra='点击选择'>
          <Item>指定专家</Item>
        </Picker>

        <TextareaItem title='备注' autoHeight />
      </List>

      <List className='g-p5-10 g-mt10 g-bdrs12 g-bg-f'>
        <List.Item extra={
          <Switch checked={checked}
                  color='#5599ff'
                  onClick={()=>setChecked(!checked)}/>
        }>
          发送给顾客核对
        </List.Item>
      </List>

      <Btn type='primary' onClick={warn}>确认新增</Btn>
    </div>
  )
}

export default Add;









